<template>
  <view class="tn-count-down">
    <!-- 天 -->
    <view
      v-if="countDownInfo.day !== ''"
      class="tn-count-down__item"
      :class="[itemClass]"
      :style="itemStyle"
    >
      <view class="value">{{ countDownInfo.day }}</view>
    </view>
    <view
      v-if="countDownInfo.day !== ''"
      class="tn-count-down__separator"
      :class="[separatorClass]"
      :style="separatorStyle"
    >
      {{ separatorValue['day'] }}
    </view>
    <!-- 时 -->
    <view
      v-if="countDownInfo.hour !== ''"
      class="tn-count-down__item"
      :class="[itemClass]"
      :style="itemStyle"
    >
      <view class="value">{{ countDownInfo.hour }}</view>
    </view>
    <view
      v-if="countDownInfo.hour !== ''"
      class="tn-count-down__separator"
      :class="[separatorClass]"
      :style="separatorStyle"
    >
      {{ separatorValue['hour'] }}
    </view>
    <!-- 分 -->
    <view
      v-if="countDownInfo.minute !== ''"
      class="tn-count-down__item"
      :class="[itemClass]"
      :style="itemStyle"
    >
      <view class="value">{{ countDownInfo.minute }}</view>
    </view>
    <view
      v-if="countDownInfo.minute !== ''"
      class="tn-count-down__separator"
      :class="[separatorClass]"
      :style="separatorStyle"
    >
      {{ separatorValue['minute'] }}
    </view>
    <!-- 秒 -->
    <view
      v-if="countDownInfo.second !== ''"
      class="tn-count-down__item"
      :class="[itemClass]"
      :style="itemStyle"
    >
      <view class="value">{{ countDownInfo.second }}</view>
    </view>
    <view
      v-if="countDownInfo.second !== ''"
      class="tn-count-down__separator"
      :class="[separatorClass]"
      :style="separatorStyle"
    >
      {{ separatorValue['second'] }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import { countDownProps, countDownEmits, CountDownSeparator, CountDownOption } from '../../../types/tn-count-down'
import countDownSeparatorValue from '../lib/separator'
import useCountDownTime from '../lib/hooks/useCountDownTime'
import { computed, watchEffect, CSSProperties, onMounted, watch } from 'vue'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'


const props = defineProps(countDownProps)
const emits = defineEmits(countDownEmits)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析边框颜色
const borderColor = computed<ColorInfo>(() => {
  return splitColorInfo('border', props?.borderColor || '')
})
// 解析分隔符颜色
const separatorColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.separatorColor || '')
})

// countDown配置信息
const option = computed<CountDownOption>(() => {
  return Object.assign({
    day: true,
    autoHiddenDay: true,
    hour: true,
    minute: true,
    second: true
  }, props?.option || {})
})

// item样式
const itemStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (componentColorInfo.style?.color) style.color = componentColorInfo.style.color
  if (componentColorInfo.style?.backgroundColor) style.backgroundColor = componentColorInfo.style.backgroundColor
  if (props?.border && borderColor.value.type === 'style') style.borderColor = borderColor.value.value
  if (props?.fontSize) style.fontSize = handleValueWithUnit(props.fontSize)
  return style
})
// separator样式
const separatorStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (separatorColor.value.type === 'style') style.color = separatorColor.value.value
  if (props?.fontSize) style.fontSize = `calc(${handleValueWithUnit(props.fontSize)} - 2rpx)`
  return style
})

// item对应的类
const itemClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class.length > 0) clazz.push(...componentColorInfo.class)
  if (props?.border) {
    clazz.push('tn-border')
    if (borderColor.value.type === 'class') clazz.push(borderColor.value.value)
  }
  return clazz.join(' ')
})
// separator对应的类
const separatorClass = computed<string>(() => {
  let clazz: string[] = []
  clazz.push(`separator--${props.separatorType}`)
  if (separatorColor.value.type === 'class') clazz.push(separatorColor.value.value)
  return clazz.join(' ')
})

// 分隔符的值
const { separatorValue } = countDownSeparatorValue(props.separatorType as CountDownSeparator || 'en')

// 定时器结束时执行的韩素
const countDownEnd = () => {
  emits('end')
}
// 倒计时相关信息
const { countDownInfo, updateOption, updateTime, startCountDown, stopCountDown } = useCountDownTime(countDownEnd)
watch(() => countDownInfo.value.time, (value: number) => {
  emits('change', value)
})

onMounted(() => {
  updateOption(option.value)
  updateTime(Number(props.time), props?.autoplay)
})

// 对外提供的方法
const start = () => {
  startCountDown()
}
const stop = () => {
  stopCountDown()
}
const setTime = (time :number) => {
  updateTime(Number(time), props?.autoplay)
}

defineExpose({
  /** 设置计时Time */
  setTime,
  /** 开始计时 */
  start,
  /** 停止倒计时 */
  stop
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-count-down {
  position: relative;
  // width: 100%;
  display: inline-flex;
  align-items: center;
  font-size: 28rpx;

  &__item {
    display: flex;
    align-items: center;
    line-height: 1;
    
    .value {
      padding: 4rpx;
    }
  }

  &__separator {
    color: #AAAAAA;
    font-size: 26rpx;
    line-height: 1;
  }
}
</style>
